<template>
  <s-layout navbar="custom" title="鲸囍云店名称" :showLeftButton="true" :navbarStyle="{ type: 'color', color: state.bgColor }">
    <view class="store-wrap" :style="{ paddingTop: sheep.$platform.device.statusBarHeight + 44 + 'px' }">
      <view class="top"></view>
      <StoreHeader
        :name="state.name"
        :level="state.level"
        :star="state.star"
        :logo="state.logo"
        :shareIcon="state.shareIcon"
        :bgColor="state.bgColor"
        :showFull="!showNavTitle"
        :headerHeight="headerHeight"
      />
      <!-- <view class="header">
        <view class="logo">
          <image :src="sheep.$url.cdn('/storage/default/20250507/094a1134be69815c540435ec7499242a.png')" mode=""></image>
        </view>
        <view class="content">
          <view class="top-box">
            <view class="name">鲸囍云店名称</view>
            <view class="level"><text>LV1</text></view>
          </view>
          <view class="level-stars">
            <image 
              v-for="i in 5"
              :key="i"
              :src="getStarImage(i)"
            />
          </view>
        </view>
        <view class="action">
          <image class="icon" :src="sheep.$url.cdn('/storage/default/20250507/a2384fa073c9fbb5183d56eb3452d91e.png')" mode=""></image>
          <view class="title">分享店铺</view>
        </view>
      </view> -->
      <view class="content-box"></view>
    </view>
  </s-layout>
</template>
<script setup>
import sheep from '@/sheep';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import { computed, reactive, ref } from 'vue';
import { isEmpty } from 'lodash';
import StoreHeader from './components/StoreHeader.vue'
const state = reactive({
  bgColor: '#346FFD',
  star: 3,
  name: '鲸囍云店名称',
  level: 1,
  star: 3,
  logo: sheep.$url.cdn('/storage/default/20250507/094a1134be69815c540435ec7499242a.png'),
  shareIcon: sheep.$url.cdn('/storage/default/20250507/a2384fa073c9fbb5183d56eb3452d91e.png'),
  bgColor: '#346FFD'
});

const showNavTitle = ref(false);
const headerHeight = ref(160); // 初始高度

const getStarImage = idx => {
  return idx <= state.star ? sheep.$url.cdn('/storage/default/20250507/0d2fbb684199b1a160b1031f986a1962.png') : sheep.$url.cdn('/storage/default/20250507/aeb5939595149906406194aa94d2a7b2.png');
}

onPageScroll((e) => {
 // 你可以根据实际页面滚动距离调整阈值
  showNavTitle.value = e.scrollTop > 80;
  headerHeight.value = e.scrollTop > 80 ? 60 : 160;
})

onLoad(() => {
  console.log('store');
   // 监听页面滚动
   uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
  });

});

</script>
<style lang='scss' scoped>
@import './style/store.scss'
</style>